<template>
  <div class="import-container">
    <div class="block">
      <div class="main">
        <div class="select-time">
          <label>选择线索创建时间区间：</label>
          <el-date-picker
            v-model="value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:100%"
            @change="getTime()"
          >
          </el-date-picker>
        </div>
        <div class="upload">
          <label>导入表格：</label>
          <el-upload
            class="upload-demo"
            style="width:100%"
            drag
            action="http://localhost:8082/customer/import"
            :on-success="onUploadSuccess"
            :on-error="onUploadError"
            :data="uploadData"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div
              class="el-upload__tip"
              slot="tip"
            >只能上传excel文件</div>
          </el-upload>
        </div>
      </div>
      <div class="bottom">
        <el-button
          type="primary"
          @click="goback"
        >返回</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
export default {
  name: 'Import',
  mixins: [ResizeMixin],
  data () {
    return {
       value: '',
      uploadData: {
        beginTime: '',
        endTime: ''
      }
    }
  },
 methods: {
    onUploadSuccess(response, file) {
      this.$message.info('上传成功')
      console.log(response);
    },
    onUploadError(response, file) {
      this.$message.info('上传失败')
    },
    getTime() {
      let bTime = new Date(this.value[0]).toJSON();
      this.uploadData.beginTime = new Date(
        +new Date(bTime) + 8 * 3600 * 1000
      )
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      let eTime = new Date(this.value[1]).toJSON();
      this.uploadData.endTime = new Date(
        +new Date(eTime) + 8 * 3600 * 1000
      )
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    goback(){
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style  scoped>
.import-container {
  min-height: 90vh;
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
}
.block {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8125rem;
}

.block div label {
  font-size: 0.1rem;
  width: 12rem;
  text-align: right;
  font-weight: 400;
  position: relative;
  bottom: -0.5rem;
}
.main {
  position: relative;
  left: -5rem;
  display: flex;
  flex-direction: column;
  flex: 0 0 20rem;
  justify-content: space-around;
}
.select-time {
  display: flex;
}
.upload {
  display: flex;
}
.el-upload__tip {
  text-align: center;
}
.bottom {
  margin-top: 2rem;
}
@media screen and (max-width: 49rem) {
  .import-container {
    height: 94vh;
    margin: 0;
  }

  .main {
    width: 100%;
    left: 0;
  }
  .select-time {
    flex: 0 0 10rem;
    display: flex;
    flex-direction: column;
  }
  .upload {
    display: flex;
    flex-direction: column;
  }
  .block div label {
    width: auto;
    font-size: 0.1rem;
    font-weight: 400;
    bottom: 0;
    text-align: left;
  }
}
</style>